<template>
    <div>
        <Modal width="820"
               @on-cancel="cancel"
               v-model="modal.addUserFalg"
               title="添加用户">
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col class="mycol" span="4">
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <div class="imgdiv">
                            <Avatar shape="square" :src="imgSrc" icon="ios-person" size="100"/>
                        </div>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Button type="warning" size="small" icon="ios-contact" @click="cropperFlag=true">设置头像
                        </Button>
                    </Row>
                </Col>
                <Col span="20">
                    <Form ref="user" :model="user" :rules="ruleValidate" inline :label-width="80">
                        <FormItem prop="work" label="登录名">
                            <Input class="myform" v-model="user.work" clearable/>
                        </FormItem>
                        <FormItem prop="password" label="密码">
                            <Input class="myform" v-model="user.password" clearable type="password" password/>
                        </FormItem>
                        <FormItem prop="name" label="名称">
                            <Input class="myform" v-model="user.name" clearable/>
                        </FormItem>
                        <FormItem prop="email" label="邮箱">
                            <Input class="myform" v-model="user.email" clearable/>
                        </FormItem>
                        <FormItem prop="telephone" label="电话">
                            <Input class="myform" v-model="user.telephone" clearable type="tel"/>
                        </FormItem>
                        <FormItem prop="roleId" label="角色">
                            <Select v-model="user.roleId" clearable class="myform">
                                <Option v-for="item in codeList.role" :key="item.codeId" :value="item.foreignKey">
                                    {{item.codeName}}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="userGroup" label="用户组">
                            <Select v-model="user.userGroup" multiple class="myform">
                                <Option v-for="item in codeList.userGroup" :key="item.codeId" :value="item.foreignKey">
                                    {{item.codeName}}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="collegeId" label="所属学院">
                            <Select v-model="user.collegeId" clearable class="myform">
                                <Option v-for="item in codeList.college" :key="item.collegeId" :value="item.collegeId">
                                    {{item.name}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
            <Button slot="footer" :loading="loading" icon="md-checkmark" @click="ok" type="primary">确定</Button>
        </Modal>
        <modal-cropper :cropperFlag="cropperFlag" @getfile="getfile"/>
    </div>
</template>

<script>
    import {UserRuleValidate} from "../ruleValidate";
    import modalCropper from "../../cropper/modalCropper";

    export default {
        components: {modalCropper},
        name: "addUser",
        props: {
            modal: {
                addUserFalg: false
            }
        },
        data() {
            return {
                codeList: [],
                cropperFlag: false,
                loading: false,
                imgSrc: null,
                ruleValidate: UserRuleValidate(),
                user: {},
                file: null,
            }
        },
        methods: {
            /**
             * 保存用户添加
             */
            async ok() {
                let flag = false;
                this.cropperFlag = false
                this.$refs['user'].validate(val => { flag = val })
                if (flag) {
                    this.loading = true
                    if (this.file != null) {
                        await this.uploadAvatar().then(res => {
                            this.user.AvatarUrl = res
                        })
                    }
                    await this.http.post("/user/saveAddUser", this.qs.parse(this.user)).then(res => {
                        if (res.data) {
                            this.$Message['success']({
                                background: true,
                                content: '添加成功'
                            });
                            this.loading = false
                            this.modal.addUserFalg = false
                            this.$parent.getAllUser()
                        } else {
                            this.$Message.error({
                                background: true,
                                content: "用户名已存在"
                            })
                        }
                    }).finally(r => {
                        this.loading = false
                    })
                }

            },
            /**
             *上传头像
             */
            async uploadAvatar() {
                let AvatarUrl = "";
                let form = new FormData();
                form.append("file", this.file)
                await this.http.post("/user/uploadAvatar", form).then(res => {
                    AvatarUrl = res.data
                })
                return AvatarUrl;
            },
            cancel() {
                this.cropperFlag = false
            },
            getfile(files) {
                this.file = files
                this.imgSrc = URL.createObjectURL(files)
            },
            /**
             * 获取全部的角色、用户组、学院数据
             */
            getAllRoleAndUserGroupAndCollege() {
                this.http.get("/user/getAllRoleAndUserGroupAndCollege").then(res => {
                    if (res.data) {
                        this.codeList = res.data
                    }
                })
            },
        },
        watch: {
            'modal.addUserFalg'(flag) {
                if (flag) {
                    this.getAllRoleAndUserGroupAndCollege()
                }
            }
        }
    }
</script>

<style scoped>
    .imgdiv {
        margin-bottom: 20px;
    }

    .myform {
        width: 235px;
    }

    .mycol {
        border-right: 1px #d2d2d2 solid;
    }
</style>
